﻿<template>
  <div>
    <el-input :value = 'value' disabled>
      <el-button slot="append" icon="el-icon-search" @click = 'showMap()' v-if="!isDisabled"></el-button>
    </el-input>
    <el-dialog :title = 'title' :visible = 'dialogSelectVisible' :width = 'dialogWidth' :before-close="handleClose" append-to-body class = 'md_dialog'>
      <div>
        <span v-if = "!isDisabled">请点击地图获取经纬度</span>
        <span v-if = "isDisabled">查看该字段的经纬度信息</span>
        <div>
          <p style = 'margin-bottom:10px;margin-right: 20px;display:inline-block'>经度为：<el-input disabled v-model = 'location.lng'></el-input></p>
          <p style = 'margin-bottom:10px;display:inline-block'>纬度为：<el-input disabled v-model = 'location.lat'></el-input></p>
          <div id = 'myMap' v-if = "dialogSelectVisible"></div>
        </div>
      </div>
      <div style="padding-top:20px;text-align:center">
        <el-button @click="handleClose" type="success">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ['isDisabled', 'value', 'title'],
  data () {
    return {
      dialogWidth: '95%',
      dialogSelectVisible: false,
      loading: false,
      loadingText: '数据加载中...',
      location: {
        lng: null,
        lat: null
      }
    }
  },
  methods: {
    // 初始化页面信息
    initPage () {
      if (this.value) {
        let arr = this.value.split(',')
        if (arr.length === 2) {
          this.location.lng = arr[0]
          this.location.lat = arr[1]
        }
      }
    },
    initMap () {
      var _self = this
      if (_self.value) {
        let splitA = _self.value.split(',')
        _self.$set(_self.location, 'lat', splitA[1])
        _self.$set(_self.location, 'lng', splitA[0])
      } else {
        _self.$set(_self.location, 'lat', null)
        _self.$set(_self.location, 'lng', null)
      }
      // 高德地图API功能
      /* global AMap */
      /* global AMAP_ANIMATION_BOUNCE */
      _self.map = new AMap.Map('myMap', {
        resizeEnable: true,
        zoom: 16,
        zooms: [3, 20],
        expandZoomRange: true
      }) // 创建Map实例
      var point = ''
      if (_self.location.lat) {
        point = new AMap.LngLat(_self.location.lng, _self.location.lat)
        let markers = new AMap.Marker({
          position: point,
          animation: 'AMAP_ANIMATION_BOUNCE'
        })
        _self.map.add(markers)
      } else {
        point = new AMap.LngLat(114.307274, 30.544488)
      }
      _self.map.setCenter(point) // 设置地图显示的中心点
      // 编辑状态时，为地图添加点击事件
      if (!_self.isDisabled) {
        _self.map.on('click', function (e) {
          var pt = e.lnglat
          _self.$set(_self.location, 'lat', pt.lat)
          _self.$set(_self.location, 'lng', pt.lng)
          point = new AMap.LngLat(pt.lng, pt.lat)
          _self.map.clearMap()
          let markers = new AMap.Marker({
            position: point,
            animation: 'AMAP_ANIMATION_BOUNCE'
          })
          _self.map.add(markers)
        })
      }
    },
    showMap () {
      this.dialogSelectVisible = true
      this.$nextTick(() => {
        this.initMap()
      })
    },
    clearData () {
      this.location = {
        lng: null,
        lat: null
      }
    },
    handleClose () {
      this.dialogSelectVisible = false
    }
  },
  mounted () {
  },
  watch: {
    location: {
      deep: true,
      handler (val) {
        if (this.location.lng && this.location.lat) {
          this.$emit('update:value', this.location.lng + ',' + this.location.lat)
        }
      }
    },
    dialogSelectVisible: {
      deep: true,
      handler (val, oldVal) {
        if (!val) {
          this.clearData()
        }
      }
    }
  }
}
</script>

<style lang='scss' scoped>
#myMap{
  width: 100%;
  height: 500px;
}
</style>
